<template>
    <div id="goodat-style">
        <!-- 擅长风格 第三个-->
        <div class="tages-content bgwrite">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack" @click-right="confirmEdit">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                        <div class="right" slot="right" >完成</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
               <div class="content-case">
                   <div
                        class="tab fz5"
                        v-for="(item,index) in tagesList"
                        :key="index"
                        @click="changetab(item,index)"
                        :class="{'active':changelist.includes(item.uid)}"
                        v-cloak
                    >{{item.styleName}}</div>
               </div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapState } from "vuex";
export default {
  components: {
  },
  computed: {
      ...mapState({
          resumeStylesInfosT: state => state.resumeStylesInfos
      })
  },
  data() {
    return {
      title: '擅长风格',
      tagesList: [],
      changelist: [],
      resumeStylesInfos:[]
    }
  },
  created() {
      this.allProficiencyStyles()
      if (this.resumeStylesInfosT) {
          this.resumeStylesInfosT.map((item)=>{
              this.changelist.push(item.styleUid)
              this.resumeStylesInfos.push({styleUid:item.styleUid,number:item.number})
          })
      }
  },
  methods: {
      diffBack() {
          this.$router.push('/performance/myIntroduction')
      },
      // 擅长风格
      async allProficiencyStyles() {
          const SPC = await HTTP("allProficiencyStyles");
          if (SPC.code == 200) {
              this.tagesList = SPC.data.proficiencyStylesList
          } else {
              this.$toast(SPC.msg || "服务器异常");
          }
      },
    // 修改简历
    async addResume() {
      const SPC = await HTTP("addResume", {
          userUid: getuserUid(),
          createBy: getuserUid(),
          workYears: "",
          resumeStylesInfos: this.resumeStylesInfos,
          resumeTypesInfos: null,
          resumeAreaInfos: null,
          workHistory: null,
          resumeSkillInfos: null
      });
      if (SPC.code == 200) {
       this.$router.push("/performance/myIntroduction");
       this.$toast('添加风格标签成功')
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    confirmEdit() {
        // 调取接口 返回 编辑简历页面 需要判断是否为空
        if (this.changelist.length<1) {
            this.$toast({
                message: "没有添加标签 o(╥﹏╥)o"
            })
        } else {
            this.addResume()
        }
        
    },
    changetab(items,index) {
      // let _this = this;
      if (this.changelist.length<6) {
      let list = this.changelist;
      list.length > 0
        ? ((items, list) => {
            list.includes(items.uid)
              ? (list.splice(list.findIndex(item => item === items.uid), 1),this.resumeStylesInfos.splice(this.resumeStylesInfos.findIndex(item=>item.styleUid==items.uid),1))
              : (list.push(items.uid),this.resumeStylesInfos.push({styleUid:items.uid,number:index+1}));
          })(items, list)
        : (list.push(items.uid),this.resumeStylesInfos.push({styleUid:items.uid,number:index+1}));
        } else if(this.changelist.length>=6) {
            let list = this.changelist;
            ((items, list) => {
                    list.includes(items.uid)
                    ? (list.splice(list.findIndex(item => item === items.uid), 1),this.resumeStylesInfos.splice(this.resumeStylesInfos.findIndex(item=>item.styleUid===items.uid),1))
                    : this.$toast({message: "只能选择6个风格标签哦"});
                })(items, list)
        }
    },
  }
};
</script>
<style>
</style>

<style lang="scss" scoped>
#goodat-style {
    position: absolute;
    width: 100%;
    height: 100%;
    .tages-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
                .right{
                    font-size: 0.32rem;
                    height: 0.92rem;
                    line-height: 1rem;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0rem;
            .content-case{
                box-sizing: border-box;
                padding: 0.4rem  0.24rem;
            .tab {
                display: inline-block;
                margin-right: 0.24rem;
                width: 2.17rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                border-radius: 0.1rem;
                margin-bottom: 0.24rem;
                background: #F5F5F5;
                color: #282828;
                font-size: 0.28rem;
                &:nth-child(3n + 3) {
                    margin-right: 0;
                }
            }
            .active {
                display: inline-block;
                margin-right: 0.24rem;
                width: 2.17rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                border-radius: 0.1rem;
                margin-bottom: 0.24rem;
                background: #5E8EFE;
                color: #fff;
                font-size: 0.28rem;
                &:nth-child(3n + 3) {
                    margin-right: 0;
                }
            }
        }
    }
}

}
</style>
